import React from 'react';
import { Button, Card, Col, DatePicker, Form, Input, InputNumber, Radio, Row, Select, Tooltip, Icon } from 'antd';
import cn from 'classnames';
import moment from 'moment';
import { FormContainer } from '@/components/UserForm';
import PersonInfo from '@/components/PersonInfo';
import SlideTabs from '@/components/SlideTabs';
import SingaporeDetail from '@/pages/MyRecruit/Offer/Detail/SingaporeDetail';
import FileUpload from '@/components/Custom/FileUpload';
import { offerStatus } from '@/pages/MyRecruit/Offer/colors';
import FlowStep from '@/components/Step';
import LinkTo from '@/components/LinkTo';
import { getOrganization } from '@/utils/utils';

import styles from './Detail.less';

const Item = ({ children, ...rest }) => (
    <Form.Item {...rest}>
        {React.cloneElement(children, {
            disabled: true
        })}
    </Form.Item>
);

const layout = {
    labelCol: {
        span: 6
    },
    wrapperCol: {
        span: 14
    }
};

const MainForm = ({ form, activeKey, setStatusVisible, setActiveKey, data, sex, approval = [] }) => {
    const { getFieldDecorator } = form;
    const tabs = [
        {
            label: '录用信息',
            key: '1'
        },
        {
            label: '薪资福利',
            key: '2'
        },
        {
            label: '背调信息',
            key: '3'
        },
        {
            label: '审批流程',
            key: '4'
        }
    ];
    let sexStr = '';
    if (data.talentSex === '1') {
        sexStr = 'man';
    } else if (data.talentSex === '2') {
        sexStr = 'woman';
    }
    // 附件
    const fileList = [];
    const files = data.offerFile || [];
    files.forEach(item => {
        const { originName, url, keyName } = item;
        const fileObj = {
            keyName,
            name: originName,
            url,
            uid: keyName
        };
        fileList.push(fileObj);
    });

    // 按钮设置offer状态按钮

    // data.entryButton && (
    //     <Button type="primary" onClick={() => setVisible(true)} ghost>
    //         一键入职
    //     </Button>
    // );

    const showOfferState = data.offerState !== 'beingEntry' && data.offerState !== 'entry' && data.setStateButton;

    const btnCfg = [
        <div>
            <Button
                type="primary"
                ghost
                onClick={() => {
                    window.open(`/office/personnelManagement/recruit/offer/detail/print?offerCode=${data.offerCode}`);
                }}
            >
                打印offer
            </Button>
            <Tooltip placement="topLeft" title="offer 打印仅包含录用信息、薪酬福利和审批流程三部分">
                <Icon type="question-circle" />
            </Tooltip>
        </div>
    ];
    if (showOfferState) {
        btnCfg.push(
            <Button style={{ marginLeft: 24 }} type="primary" ghost onClick={() => setStatusVisible(true)}>
                设置offer状态
            </Button>
        );
    }

    const stepContent = refs => (
        <>
            <h3 className="vv-from-title" ref={refs[3].ref}>
                审批流程
            </h3>
            <Row>
                <Col span={3}></Col>
                <Col span={21}>
                    <Row style={{ paddingBottom: 16 }}>
                        申请主题：
                        <LinkTo
                            to="/office/institutions/flowManage/fullApprovalProcess/processDetail"
                            query={{
                                actionShow: 'no',
                                applicationNo: data.applicationNo
                            }}
                        >
                            offer申请流程-{data.companyName}-{data.talentName}
                        </LinkTo>
                    </Row>
                    <FlowStep data={approval} />
                </Col>
            </Row>
        </>
    );

    return (
        <Card bordered={false}>
            <PersonInfo
                name={`${data.talentName || ''}-${data.entryPostName || ''}`}
                status={`${data.candidateStageName || ''}-${data.candidateStateName || ''}`}
                sex={sexStr}
                color={offerStatus[data.offerState]}
                infos={[
                    {
                        label: '招聘负责人',
                        value: data.offerLeaderName
                    },
                    {
                        label: '业务负责人',
                        value: data.servicePersonName
                    }
                ]}
                btns={btnCfg}
            >
                <SlideTabs tabs={tabs} activeKey={activeKey} onChange={key => setActiveKey(key)}>
                    {refs => {
                        if (getOrganization(data.companyId)?.area !== 'cn') {
                            return (
                                <>
                                    <SingaporeDetail
                                        Item={Item}
                                        sex={sex}
                                        layout={layout}
                                        refs={refs}
                                        form={form}
                                        data={data}
                                        fileList={fileList}
                                    />
                                    {stepContent(refs)}
                                </>
                            );
                        }
                        return (
                            <>
                                <Form className={styles.detail} {...layout}>
                                    <h3 className="vv-from-title" ref={refs[0].ref}>
                                        录用信息
                                    </h3>
                                    <FormContainer gutter={40}>
                                        <Item label="录用人姓名">
                                            {getFieldDecorator('a', {
                                                initialValue: data.talentName
                                            })(<Input />)}
                                        </Item>
                                        <Item label="性别">
                                            {getFieldDecorator('b', {
                                                initialValue: data.talentSex
                                            })(<Radio.Group options={sex} />)}
                                        </Item>
                                        <Item label="出生年月">
                                            {getFieldDecorator('c', {
                                                initialValue:
                                                    typeof data.talentBirth === 'object' ? undefined : data.talentBirth
                                            })(<Input />)}
                                        </Item>
                                        <Item label="最高学历">
                                            {getFieldDecorator('d', {
                                                initialValue: data.talentAgreeName
                                            })(<Select />)}
                                        </Item>
                                        <Item label="录用部门">
                                            {getFieldDecorator('f', {
                                                initialValue: data.departmentName
                                            })(<Input />)}
                                        </Item>
                                        <Item label="录用职位">
                                            {getFieldDecorator('e', {
                                                initialValue: data.entryPostName
                                            })(<Input />)}
                                        </Item>
                                        <Item label="职级">
                                            {getFieldDecorator('entryLevel', {
                                                initialValue: data.entryLevel
                                            })(<Input disabled />)}
                                        </Item>
                                        <Item label="入职时间">
                                            {getFieldDecorator('h', {
                                                initialValue: data.entryDate ? moment(data.entryDate) : null
                                            })(<DatePicker style={{ width: '100%' }} />)}
                                        </Item>
                                        <Item label="同岗经验/年">
                                            {getFieldDecorator('i', {
                                                initialValue: data.talentExperience || ''
                                            })(<InputNumber />)}
                                        </Item>
                                        <Item label="试用期带教人">
                                            {getFieldDecorator('j', {
                                                initialValue: data.teacherName
                                            })(<Input />)}
                                        </Item>
                                    </FormContainer>
                                    <h3 className="vv-from-title" ref={refs[1].ref}>
                                        薪资福利
                                    </h3>
                                    <FormContainer gutter={40}>
                                        <Item label="原单位月薪">
                                            {getFieldDecorator('l', {
                                                initialValue: data.oldMonthSalary
                                            })(<InputNumber />)}
                                        </Item>
                                        <Item label="原综合年薪">
                                            {getFieldDecorator('m', {
                                                initialValue: data.oldYearSalary
                                            })(<InputNumber />)}
                                        </Item>
                                        <Item label="现月薪(税前)">
                                            {getFieldDecorator('p', {
                                                initialValue: data.monthSalary
                                            })(<InputNumber />)}
                                        </Item>
                                        <Item label="现综合年薪">
                                            {getFieldDecorator('o', {
                                                initialValue: data.yearSalary
                                            })(<InputNumber />)}
                                        </Item>
                                        <Item label="季度绩效奖金(税前)">
                                            {getFieldDecorator('q', {
                                                initialValue: data.seasonPrize
                                            })(<InputNumber />)}
                                        </Item>
                                        <Item label="年薪涨幅">
                                            {getFieldDecorator('n', {
                                                initialValue: data.gainPercent
                                            })(
                                                <InputNumber
                                                    formatter={value =>
                                                        `${value}%`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
                                                    }
                                                    parser={value => value.replace(/\$\s?|(,*)/g, '')}
                                                />
                                            )}
                                        </Item>
                                        <Item label="半年奖金(税前)">
                                            {getFieldDecorator('r', {
                                                initialValue: data.halfPrize
                                            })(<InputNumber />)}
                                        </Item>
                                        <Item label="年终服务奖金(税前)">
                                            {getFieldDecorator('s', {
                                                initialValue: data.yearPrize
                                            })(<InputNumber />)}
                                        </Item>
                                        {/* <Item label="五险一金缴纳基数">
                                            {getFieldDecorator('t', {
                                                initialValue: data.insuranceCardinal
                                            })(<InputNumber />)}
                                        </Item> */}
                                        <Item label="劳动合同开始时间">
                                            {getFieldDecorator('u', {
                                                initialValue: data.contractBeginDate
                                                    ? moment(data.contractBeginDate)
                                                    : null
                                            })(<DatePicker style={{ width: '100%' }} />)}
                                        </Item>
                                        <Item label="试用期长度">
                                            {getFieldDecorator('v', {
                                                initialValue: data.tryDurationName
                                            })(<Input />)}
                                        </Item>
                                        <Item
                                            label="申请理由说明"
                                            vvspan={24}
                                            labelCol={{ md: 3 }}
                                            wrapperCol={{ md: 19 }}
                                        >
                                            {getFieldDecorator('v', {
                                                initialValue: data.remark
                                            })(<Input.TextArea rows={5} />)}
                                        </Item>
                                    </FormContainer>

                                    {/* <h3 className="vv-from-title" ref={refs[2].ref}>
                                    录用意见
                                </h3>
                                <FormContainer gutter={40}>
                                    <Item
                                        vvspan={24}
                                        labelCol={{ md: 3 }}
                                        wrapperCol={{ md: 19 }}
                                        label="人力资源总监意见"
                                    >
                                        {getFieldDecorator('w', {
                                            initialValue: data.hrBossOpinion
                                        })(<Input.TextArea rows={5} />)}
                                    </Item>
                                    <Item
                                        vvspan={24}
                                        labelCol={{ md: 3 }}
                                        wrapperCol={{ md: 19 }}
                                        label="总经理意见"
                                    >
                                        {getFieldDecorator('x', {
                                            initialValue: data.ceoOpinion
                                        })(<Input.TextArea rows={5} />)}
                                    </Item>
                                </FormContainer> */}
                                    <div
                                        style={{
                                            margin: '10px 15px 30px 0'
                                        }}
                                        ref={refs[2].ref}
                                    >
                                        <h3 className={cn('vv-from-title', styles.title)}>背调信息（360评价）</h3>
                                        <span className={styles.titleDescription}>最近一份工作经历</span>
                                    </div>
                                    <FormContainer gutter={40}>
                                        <Item label="背调记录人">
                                            {getFieldDecorator('y', {
                                                initialValue: data.backRecorderName
                                            })(<Input />)}
                                        </Item>
                                        <Item label="背调记录人职位">
                                            {getFieldDecorator('z', {
                                                initialValue: data.backRecorderPost
                                            })(<Input />)}
                                        </Item>
                                        <Item
                                            label="直属上级领导评价"
                                            vvspan={24}
                                            labelCol={{ md: 3 }}
                                            wrapperCol={{ md: 19 }}
                                        >
                                            {getFieldDecorator('a1', {
                                                initialValue: data.bossOpinion
                                            })(<Input.TextArea rows={5} />)}
                                        </Item>
                                        <Item label="同级评价" vvspan={24} labelCol={{ md: 3 }} wrapperCol={{ md: 19 }}>
                                            {getFieldDecorator('b1', {
                                                initialValue: data.friendOpinion
                                            })(<Input.TextArea rows={5} />)}
                                        </Item>
                                        <Item label="下属评价" vvspan={24} labelCol={{ md: 3 }} wrapperCol={{ md: 19 }}>
                                            {getFieldDecorator('c1', {
                                                initialValue: data.subordinateOpinion
                                            })(<Input.TextArea rows={5} />)}
                                        </Item>
                                        <Item label="附件" vvspan={24} labelCol={{ md: 3 }} wrapperCol={{ md: 19 }}>
                                            {getFieldDecorator('c1', {
                                                initialValue: {
                                                    allFileList: fileList,
                                                    uploadResourceFile: null
                                                }
                                            })(<FileUpload />)}
                                        </Item>
                                    </FormContainer>
                                </Form>
                                {stepContent(refs)}
                            </>
                        );
                    }}
                </SlideTabs>
            </PersonInfo>
        </Card>
    );
};

export default Form.create()(MainForm);
